<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<body>
	<section class="content-header">
		<h1>个人信息</h1>
		<ol class="breadcrumb">
			<li class="active"><i class="fa fa-user"></i> 个人信息</li>
		</ol>
	</section>

	<section class="content">
		<div class="row">
			<div class="col-md-3">

				<!-- Profile Image -->
				<div class="box box-primary">
					<div class="box-body box-profile">
						<div class="fileupload-icon text-center">
							<img data-src="holder.js/96x96" class="holder-image profile-user-img img-responsive img-circle"
								style="width: 96px; height: 96px;" th:attr="src=${currentUser.photo}"> <input type="file"
								class="file-loading" name="file"> <input type="hidden" name="photo" th:value="${currentUser.photo}" />
						</div>

						<h3 class="profile-username text-center" th:text="${currentUser.name}">name</h3>

						<p class="text-muted text-center" th:inline="text"></p>

					</div>
					<!-- /.box-body -->
				</div>
				<!-- /.box -->

			</div>
			<!-- /.col -->
			<div class="col-md-9">
				<div class="nav-tabs-custom">
					<ul class="nav nav-tabs">
						<li class="active">
							<a href="#settings" data-toggle="tab"> 设置 </a>
						</li>
					</ul>
					<div class="tab-content">
						<div class="active tab-pane" id="settings">
							<form class="form-horizontal" th:action="@{/profile/save}" method="post" th:object="${currentUser}">
								<div class="form-group">
									<label class="col-sm-2 control-label">账号</label>

									<div class="col-sm-10">
										<div class="form-control no-border" th:text="*{username}"></div>
									</div>
								</div>
								<div class="form-group">
									<label for="input-name" class="col-sm-2 control-label"><i class="required-tip">*</i>姓名</label>

									<div class="col-sm-10">
										<input class="form-control" id="input-name" placeholder="请输入姓名" name="name" th:value="*{name}" type="text"
											data-bv-notempty="true" data-bv-notempty-message="请填写姓名">
									</div>
								</div>
								<div class="form-group">
									<label for="input-oldpassword" class="col-sm-2 control-label">旧密码</label>

									<div class="col-sm-10">
										<input class="form-control" id="input-oldpassword" name="oldPassword" value="" type="password">
									</div>
								</div>
								<div class="form-group">
									<label for="input-password" class="col-sm-2 control-label"><i class="fa fa-info-circle"
										data-toggle="tooltip" data-placement="top" title="密码必须是6-16位数字、字符组合（不能是纯数字）。留空则不修改"></i> 新密码</label>

									<div class="col-sm-10">
										<input class="form-control" id="input-password" name="newPassword" placeholder="请输入密码, 留空则不修改" value=""
											type="password">
									</div>
								</div>
								<div class="form-group">
									<label for="input-email" class="col-sm-2 control-label">邮箱</label>

									<div class="col-sm-10">
										<input class="form-control" id="input-email" placeholder="请输入邮箱" name="email" th:value="*{email}" type="text"
											data-bv-emailAddress="true" data-bv-emailAddress-message="请填写正确的邮箱">
									</div>
								</div>

								<div class="form-group">
									<label for="input-mobile" class="col-sm-2 control-label">手机号码</label>

									<div class="col-sm-10">
										<input class="form-control" id="input-mobile" placeholder="请输入手机号码" name="mobile" th:value="*{mobile}"
											type="text" data-bv-regexp="true" data-bv-regexp-regexp="^[1][0-9]{10}$" data-bv-regexp-message="请填写正确的手机号码">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-danger">提交</button>
									</div>
								</div>
							</form>
						</div>
						<!-- /.tab-pane -->
					</div>
					<!-- /.tab-content -->
				</div>
				<!-- /.nav-tabs-custom -->
			</div>
			<!-- /.col -->
		</div>
	</section>


	<script type="text/javascript">
		requirejs([ "domReady", "validator", "holder", "fileinput" ], function(ready) {
			ready(function() {
				activeMenu("profile");
				$(".fileupload-icon>input[type=file]").fileinput({
					language : "zh",
					uploadUrl : base + "/multipart/upload/image",
					maxFileSize : 1500,
					showClose : false,
					showCaption : false,
					multiple : false,
					showUpload : false, // hide upload button
					showRemove : false, // hide remove button
					minFileCount : 1,
					maxFileCount : 1,
					allowedFileTypes : [ "image" ],
					maxFileSize : 10 * 1024 * 1024,
					showPreview : false
				}).on("filebatchselected", function(event, files) {
					$(this).fileinput("upload");
				}).on('fileuploaded', function(event, data, previewId, index) {
					response = data.response;
					if (response.success) {
						var $fileupload = $(this).closest(".fileupload-icon");
						$fileupload.find("input[type=hidden]").val(response.urls);
						$fileupload.find("img").attr("src", response.urls);
						var $fileinput = $fileupload.find("input[type=file]");
						$($fileinput.data("target")).val(response.urls);

						$.post(base + "/profile/photo", {
							url : response.urls
						}, function(result) {
							if (result.success) {
								$.alert({
									title : false,
									content : "修改成功",
									buttons : {
										ok : {
											text : "确定"
										}
									}
								});
							} else {
								$.alert({
									title : false,
									content : result.msg
								});
							}
						});
					}
				});
				$("#settings>form").bootstrapValidator().on("success.form.bv", function(e) {
					e.preventDefault();
					var $form = $(e.target);
					var bv = $form.data('bootstrapValidator');
					$.post($form.attr('action'), $form.serialize(), function(result) {
						if (result.success) {
							$.alert({
								title : false,
								content : "保存成功",
								buttons : {
									ok : {
										text : "确定"
									}
								}
							});
						} else {
							$.alert({
								title : false,
								content : result.msg
							});

							$form.bootstrapValidator('disableSubmitButtons', false);
						}
					}, "json");
				});
			});
		});
	</script>
</body>
</html>

